var swapImageName;
var promptId;
var container = document.getElementById('videoContainer');
// 获取当前页面的前缀（协议 + 域名 + 端口）
// const currentOrigin = window.location.origin;
//
// // 获取 API 基础 URL
// function getApiBaseUrl() {
//     if (currentOrigin === 'http://218.77.58.8:8189') {
//         return '/faceswap/';
//     } else {
//         return '';
//     }
// }

var apiBaseUrl = getApiBaseUrl();

function selectTabs() {
    // 获取所有选项卡和内容区域
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.content');

    /**
     * 点击选项卡时，通过 classList 动态切换 active-tab 和 active-content
     */
    // 遍历每个选项卡
    for (let i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', function () {
            // 移除当前激活的选项卡和内容
            document.querySelector('.active-tab').classList.remove('active-tab');
            document.querySelector('.active-content').classList.remove('active-content');

            // 激活当前点击的选项卡
            tabs[i].classList.add('active-tab');
            const targetId = tabs[i].getAttribute('data-target');
            document.getElementById(targetId).classList.add('active-content');
        });
    }
}

// 使用该方法
document.addEventListener('DOMContentLoaded', function () {
    // 获取所有选项卡和内容区域
    var tabs = document.querySelectorAll('.tab');
    var contents = document.querySelectorAll('.content');

    // 调用方法来激活选项卡
    selectTabs(tabs, contents);
});

function previewImage(event) {
    swapImageName = undefined;
    promptId = undefined;
    document.getElementById("videoContainer").replaceChildren();
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
            const imagePreview = document.getElementById('imagePreview');
            imagePreview.src = e.target.result;
        };
        reader.readAsDataURL(file);
    } else {
        alert('请选择一个图片文件');
    }
}


async function uploadAndCreateVideo() {
    let verificationCode = document.getElementById('verificationCodeInput').value;

    let fileInput = document.getElementById("fileInput");
    if (fileInput.files.length < 1) {
        alert("请先选择图片");
        return;
    }

    try {
        var results = await checkVerificationCode(verificationCode);
        if (!results.result) {
            alert(results.message);
            return; // 验证失败，直接退出
        }

        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append("image", file);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", apiBaseUrl + "/uploadFaceSwapImage", true);
        xhr.onload = function () {
            var jsonData = JSON.parse(xhr.responseText);
            if (jsonData.code === 200) {
                swapImageName = file.name;
                runFaceSwapDialog();
            } else {
                alert(jsonData.message);
            }


        };

        xhr.onerror = function () {
            alert("上传过程中出现错误");
        };

        xhr.send(formData);
    } catch (error) {
        alert(error.message); // 捕获验证或解析的错误
    }
}

function checkVerificationCode(code) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", apiBaseUrl + "/checkVerificationCode", true);
        xhr.onload = function () {
            try {
                var jsonData = JSON.parse(xhr.responseText);
                if (jsonData.code === 200) {
                    resolve({result: true, message: jsonData.message});
                } else {
                    resolve({result: false, message: jsonData.message});
                    document.getElementById("verificationCodeInput").value = '';
                }
            } catch (error) {
                reject(new Error("响应解析失败"));
            }
        };

        xhr.onerror = function () {
            reject(new Error("验证请求失败"));
        };

        var param = "verificationCode=" + encodeURIComponent(code);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(param);
    });
}

function runFaceSwapDialog() {
    const userChoice = confirm("图片上传成功！提交换脸工作流到视频生成可能需要等候15～20分钟，是否立即提交？");
    promptId = undefined;
    if (userChoice) {
        this.sendImageCreateVideo();
        // 模拟点击某个选项卡
        const tabs = document.querySelectorAll('.tab');
        if (tabs[1]) {  // 假设要点击第二个选项卡
            tabs[1].click();  // 模拟点击第二个选项卡
        }

    } else {

    }
}

function uploadFileBtnOnclick() {
    const fileInput = document.getElementById("fileInput");
    if (fileInput.files.length < 1) {
        alert("请先选择图片");
        return;
    }
    const file = fileInput.files[0];
    var formData = new FormData();
    formData.append("file", file);
    const xhr = new XMLHttpRequest();
    xhr.open("POST", apiBaseUrl + "/uploadFaceSwapImage", true);
    xhr.onload = function () {
        var jsonData = JSON.parse(xhr.responseText);
        if (jsonData.code === 200) {
            swapImageName = file.name;
            alert("上传图片成功");
        } else {
            alert(jsonData.message);
        }
    };

    xhr.onerror = function () {
        alert("上传过程中出现错误");
    };

    xhr.send(formData);
}

function sendImageCreateVideo() {
    if (typeof swapImageName === 'undefined') {
        alert("请先上传图片");
        return;
    }
    const xhr = new XMLHttpRequest();
    var getUrl = apiBaseUrl + "/reActorFaceSwap?filename=" + swapImageName;
    xhr.open("GET", getUrl, true)
    xhr.onload = function () {
        let responseData = JSON.parse(xhr.responseText);
        if (responseData.code === 200) {
            var result = responseData.data;
            promptId = result.promptId;
            showPromptIdDialog();
        } else {
            alert("开始队列失败,请检查图片");
        }
    }
    //设置当请求遇到错误时的回调函数（例如网络错误）
    xhr.onerror = function () {
        console.error("Network error occurred");
    };
    // 发送请求
    xhr.send();

}

function videoView() {
    var inputElement = document.getElementById('promptInput');
    var inputValue = inputElement.value;
    if (inputValue !== 'undefined' && inputValue !== "" && inputValue != null) {
        promptId = inputValue;
    }
    if (typeof promptId === 'undefined') {
        alert('请先完成“图片上传”选项卡中的流程，或是将你的工作流id填入输入框内再执行该操作');
        return;
    }
    const xhr = new XMLHttpRequest();
    const getUrl = apiBaseUrl + "/viewVideo?promptId=" + promptId;
    xhr.open("GET", getUrl, true)
    xhr.onload = function () {
        let resultData = JSON.parse(xhr.responseText);
        if (resultData.code === 200) {
            // 1. 创建<video>元素
            let video = document.createElement('video');
            let resultData = JSON.parse(xhr.responseText);
            let data = resultData.data;
            // 2. 设置属性
            video.src = data.url; // 替换为你的视频文件URL
            video.controls = true; // 显示控件（播放、暂停等）
            video.width = 640; // 设置视频宽度
            video.height = 360; // 设置视频高度
            //3.清空这个container,不然会出现两个视频，每次只允许播放一个
            container.replaceChildren();
            //4. 插入到文档中
            container.appendChild(video);
        } else {
            alert(resultData.message);
            document.getElementById("promptInput").value = '';
        }
    }
    xhr.send();
}

function downloadVideo() {
    var inputElement = document.getElementById('promptInput');
    var inputValue = inputElement.value;
    if (inputValue !== 'undefined' && inputValue !== "" && inputValue != null) {
        promptId = inputValue;
    }
    if (typeof promptId === 'undefined') {
        alert('请先完成“图片上传”选项卡中的流程，或是将你的工作流id填入输入框内再执行该操作');
        return;
    }
    checkPromptId(promptId, function (isValid) {
        if (isValid) {
            window.location.href = apiBaseUrl + '/downloadVideo?promptId=' + promptId;
        } else {
            document.getElementById("promptInput").value = '';
            console.log('Prompt ID is invalid');
        }
    });
}

function checkPromptId(promptId, callback) {
    const xhr = new XMLHttpRequest();
    const getUrl = apiBaseUrl + '/checkPromptId?promptId=' + promptId;
    xhr.open('GET', getUrl, true);
    xhr.onload = function () {
        let resultData = JSON.parse(xhr.responseText);
        if (resultData.code !== 200) {
            alert(resultData.message);
            callback(false);
            return;
        }
        callback(true);
    }
    xhr.send();
}

function showPromptIdDialog() {
    document.getElementById('promptId').textContent = promptId;
    document.getElementById('customModal').style.display = "flex";
}

// 复制 ID 到剪贴板
function handleYes() {
    // navigator.clipboard.writeText(promptId).then(function () {
    //     alert("ID 已复制到剪贴板！");
    //     closeModal();
    // }).catch(function (err) {
    //     alert("复制失败: " + err);
    //     closeModal();
    // });
    copyToClipboard(promptId);
    closeModal();
}

// 自动填写 ID 到输入框
function handleNo() {
    document.getElementById("promptInput").value = promptId;
    closeModal();
}

// 关闭弹窗
function closeModal() {
    document.getElementById("customModal").style.display = "none";
}

// 定义 copyToClipboard 函数，接收要复制的文本作为参数
function copyToClipboard(text) {
    // 创建一个 <textarea> 元素，用于暂时存放要复制的文本
    const textArea = document.createElement('textarea');
    // 将传入的文本赋值给 textarea 的值
    textArea.value = text;
    // 将这个 textarea 添加到页面的 body 中，确保它能被选中
    document.body.appendChild(textArea);

    // 选中 textarea 中的文本内容
    textArea.select();
    // 如果是移动设备，需要设置选中范围以确保可以正确复制
    textArea.setSelectionRange(0, 99999); // For mobile devices

    try {
        // 调用 document.execCommand('copy') 来执行复制操作
        // execCommand('copy') 将选中的文本复制到剪贴板
        document.execCommand('copy');
        alert('ID 已复制到剪贴板！');
    } catch (err) {
        // 如果复制失败，捕获错误并打印失败信息
        alert('复制失败，你的浏览器不支持复制到剪贴板，请手动复制');
        console.error('Unable to copy text', err);
    }

    // 删除临时创建的 textarea 元素，因为它的任务已经完成
    document.body.removeChild(textArea);
}